<script setup lang="ts">
  // GET /editor/drafts/article 获取登录用户所有的草稿
  // DELETE /editor/drafts/article/{id} 删除草稿接口
  import {computed} from 'vue'
  const nuxtApp = useNuxtApp()
  const draftDataList = ref([])
  nuxtApp.$tokenExpireJudge()
  const getDraftList = async() => {
    const {data, msg} = await nuxtApp.$request('/editor/drafts/article',{
      method: 'GET',
      server: true,
      key: 'editorDraftsArticle'
    }).catch(e => {
      // nuxtApp.$mutual['notification'].error({
      //   content: e.message,
      //   duration: 5000
      // })
    })
    console.log(data)
    if (data) draftDataList.value = data
  }

  // onMounted(async () => {
  //   await nextTick(getDraftList)
  // })

  const draftLen = computed(() => {
    return `草稿箱(${draftDataList.value.length})`
  })
  getDraftList()
</script>


<template>
  <!--title="文章"-->
  <ClientOnly>
    <n-card style="margin-bottom: 16px">
      <n-tabs type="line" animated>
        <n-tab-pane name="draft" :tab="draftLen">
          <draft-list @delete="getDraftList" :data-list="draftDataList"></draft-list>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </ClientOnly>
</template>

<style scoped lang="scss">
  .card-tabs .n-tabs-nav--bar-type {
    padding-left: 4px;
  }
</style>
